<template>
    <div class="searchChildRouterPage">

        <order-box :data="orderList" @changeData="changeSort"></order-box>

        <video-list-box :data="videoList"></video-list-box>

        <div class="paging" v-if="numPages">
            <pagin-tion :total="numPages" @changeIndex="changePage"></pagin-tion>
        </div>

    </div> 
</template>

<script lang="ts" setup>
import { onBeforeMount,ref } from 'vue'
import { videoListBox,getDiffTypeData,paginTion,orderBox } from '../layout/index'
import { orderCity,round,duration } from '@/JSON/searchOrder.js'
import { change_query } from '../type'
import { useRouter } from 'vue-router'
import { baseRouteGetStatus,changeNowRoute } from '@/router/changeUrl'

interface Props{
    keyword:string
}

const props = defineProps<Props>()
const router = useRouter()
let orderList = ref<Array<any>>([round,duration,orderCity])
let videoList = ref()
const map = new Map()
let numPages = ref<number | null>()

onBeforeMount(() => {
    baseRouteGetStatus(router,map)
    let obj = changeNowRoute(router,map)
    initData(obj)
})
function initData(other?:change_query){
    videoList.value = null
    getDiffTypeData('video',props.keyword,other).then(res => {
        console.log('video',res);
        if (!numPages.value){
            numPages.value = res.data.numPages
        }
        videoList.value = res.data?.result
    }).catch(res => {
        alert('video数据加载失败啦')
    })
}
function changePage(val:number){
    if (val === 1) map.delete('page')
    else map.set('page',val)

    const obj = changeNowRoute(router,map)
    return initData(obj)
}
/**
 * 
 * @param title query中的key
 * @param label query中的value
 * 
 */
function changeSort(title:string,label:string){
    numPages.value = null
    map.set(title,label)
    map.delete('page')
    const obj = changeNowRoute(router,map)
    return initData(obj)
}

</script>

<style lang="scss" scoped>
@import url(../../../assets/css/publicNodeStyle.scss);
</style>